<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<meta name="generator" content="JsDoc Toolkit" />
		
		<title>JsDoc Reference - pv.Panel</title>

		<style type="text/css">
			/* default.css */
body
{
	font: 12px "Lucida Grande", Tahoma, Arial, Helvetica, sans-serif;
	width: 800px;
}

.header
{
	clear: both;
	background-color: #ccc;
	padding: 8px;
}

h1
{
	font-size: 150%;
	font-weight: bold;
	padding: 0;
	margin: 1em 0 0 .3em;
}

hr
{
	border: none 0;
	border-top: 1px solid #7F8FB1;
	height: 1px;
}

pre.code
{
	display: block;
	padding: 8px;
	border: 1px dashed #ccc;
}

#index
{
	margin-top: 24px;
	float: left;
	width: 160px;
	position: absolute;
	left: 8px;
	background-color: #F3F3F3;
	padding: 8px;
}

#content
{
	margin-left: 190px;
	width: 600px;
}

.classList
{
	list-style-type: none;
	padding: 0;
	margin: 0 0 0 8px;
	font-family: arial, sans-serif;
	font-size: 1em;
	overflow: auto;
}

.classList li
{
	padding: 0;
	margin: 0 0 8px 0;
}

.summaryTable { width: 100%; }

h1.classTitle
{
	font-size:170%;
	line-height:130%;
}

h2 { font-size: 110%; }
caption, div.sectionTitle
{
	background-color: #7F8FB1;
	color: #fff;
	font-size:130%;
	text-align: left;
	padding: 2px 6px 2px 6px;
	border: 1px #7F8FB1 solid;
}

div.sectionTitle { margin-bottom: 8px; }
.summaryTable thead { display: none; }

.summaryTable td
{
	vertical-align: top;
	padding: 4px;
	border-bottom: 1px #7F8FB1 solid;
	border-right: 1px #7F8FB1 solid;
}

/*col#summaryAttributes {}*/
.summaryTable td.attributes
{
	border-left: 1px #7F8FB1 solid;
	width: 140px;
	text-align: right;
}

td.attributes, .fixedFont
{
	line-height: 15px;
	color: #002EBE;
	font-family: "Courier New",Courier,monospace;
	font-size: 13px;
}

.summaryTable td.nameDescription
{
	text-align: left;
	font-size: 13px;
	line-height: 15px;
}

.summaryTable td.nameDescription, .description
{
	line-height: 15px;
	padding: 4px;
	padding-left: 4px;
}

pre
{
	border-left: solid 10px #ddd;
	padding-left: 1.5em;
}

.summaryTable { margin-bottom: 8px; }

ul.inheritsList
{
	list-style: square;
	margin-left: 20px;
	padding-left: 0;
}

.detailList {
	margin-left: 20px; 
	line-height: 15px;
}
.detailList dt { margin-left: 20px; }

.detailList .heading
{
	font-weight: bold;
	padding-bottom: 6px;
	margin-left: 0;
}

.light, td.attributes, .light a:link, .light a:visited
{
	color: #777;
	font-style: italic;
}

.fineprint
{
	text-align: right;
	font-size: 10px;
}

		</style>
	</head>

	<body>
<!-- ============================== header ================================= -->	
		<!-- begin static/header.html -->
		<div id="header">
</div>
		<!-- end static/header.html -->

<!-- ============================== classes index ============================ -->
		<div id="index">
			<!-- begin publish.classesIndex -->
			<div align="center"><a href="../index.html">Class Index</a>
| <a href="../files.html">File Index</a></div>
<hr />
<h2>Classes</h2>
<ul class="classList">
	
	<li><i><a href="../symbols/_global_.html">_global_</a></i></li>
	
	<li><a href="../symbols/Array.html">Array</a></li>
	
	<li><a href="../symbols/Date.html">Date</a></li>
	
	<li><a href="../symbols/pv.html">pv</a></li>
	
	<li><a href="../symbols/pv.Anchor.html">pv.Anchor</a></li>
	
	<li><a href="../symbols/pv.Area.html">pv.Area</a></li>
	
	<li><a href="../symbols/pv.Bar.html">pv.Bar</a></li>
	
	<li><a href="../symbols/pv.Color.html">pv.Color</a></li>
	
	<li><a href="../symbols/pv.Color.Hsl.html">pv.Color.Hsl</a></li>
	
	<li><a href="../symbols/pv.Color.Rgb.html">pv.Color.Rgb</a></li>
	
	<li><a href="../symbols/pv.Colors.html">pv.Colors</a></li>
	
	<li><a href="../symbols/pv.Dot.html">pv.Dot</a></li>
	
	<li><a href="../symbols/pv.Flatten.html">pv.Flatten</a></li>
	
	<li><a href="../symbols/pv.Image.html">pv.Image</a></li>
	
	<li><a href="../symbols/pv.Label.html">pv.Label</a></li>
	
	<li><a href="../symbols/pv.Layout.grid.html">pv.Layout.grid</a></li>
	
	<li><a href="../symbols/pv.Layout.icicle.html">pv.Layout.icicle</a></li>
	
	<li><a href="../symbols/pv.Layout.stack.html">pv.Layout.stack</a></li>
	
	<li><a href="../symbols/pv.Layout.sunburst.html">pv.Layout.sunburst</a></li>
	
	<li><a href="../symbols/pv.Layout.treemap.html">pv.Layout.treemap</a></li>
	
	<li><a href="../symbols/pv.Line.html">pv.Line</a></li>
	
	<li><a href="../symbols/pv.Mark.html">pv.Mark</a></li>
	
	<li><a href="../symbols/pv.Nest.html">pv.Nest</a></li>
	
	<li><a href="../symbols/pv.ns.html">pv.ns</a></li>
	
	<li><a href="../symbols/pv.Panel.html">pv.Panel</a></li>
	
	<li><a href="../symbols/pv.Rule.html">pv.Rule</a></li>
	
	<li><a href="../symbols/pv.Scale.linear.html">pv.Scale.linear</a></li>
	
	<li><a href="../symbols/pv.Scale.log.html">pv.Scale.log</a></li>
	
	<li><a href="../symbols/pv.Scale.ordinal.html">pv.Scale.ordinal</a></li>
	
	<li><a href="../symbols/pv.Tree.html">pv.Tree</a></li>
	
	<li><a href="../symbols/pv.Vector.html">pv.Vector</a></li>
	
	<li><a href="../symbols/pv.version.html">pv.version</a></li>
	
	<li><a href="../symbols/pv.Wedge.html">pv.Wedge</a></li>
	
</ul>
<hr />
			<!-- end publish.classesIndex -->
		</div>
		
		<div id="content">
<!-- ============================== class title ============================ -->
			<h1 class="classTitle">
				
				Class pv.Panel
			</h1>

<!-- ============================== class summary ========================== -->			
			<p class="description">
				<br />Extends
					<a href="../symbols/pv.Bar.html">pv.Bar</a>.<br />
				
			
				Represents a container mark. Panels allow repeated or nested
structures, commonly used in small multiple displays where a small
visualization is tiled to facilitate comparison across one or more
dimensions. Other types of visualizations may benefit from repeated and
possibly overlapping structure as well, such as stacked area charts. Panels
can also offset the position of marks to provide padding from surrounding
content.

<p>All Protovis displays have at least one panel; this is the root panel to
which marks are rendered. The box model properties (four margins, width and
height) are used to offset the positions of contained marks. The data
property determines the panel count: a panel is generated once per associated
datum. When nested panels are used, property functions can declare additional
arguments to access the data associated with enclosing panels.

<p>Panels can be rendered inline, facilitating the creation of sparklines.
This allows designers to reuse browser layout features, such as text flow and
tables; designers can also overlay HTML elements such as rich text and
images.

<p>All panels have a <tt>children</tt> array (possibly empty) containing the
child marks in the order they were added. Panels also have a <tt>root</tt>
field which points to the root (outermost) panel; the root panel's root field
points to itself.

<p>See also the <a href="../../api/">Protovis guide</a>.
				
				
					<br /><i>Defined in: </i> <a href="../symbols/src/mark_Panel.js.html">Panel.js</a>.
				
			</p>

<!-- ============================== constructor summary ==================== -->			
			
			<table class="summaryTable" cellspacing="0" summary="A summary of the constructor documented in the class pv.Panel.">
				<caption>Class Summary</caption>
				<thead>
					<tr>
						<th scope="col">Constructor Attributes</th>
						<th scope="col">Constructor Name and Description</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td class="attributes">&nbsp;</td>
						<td class="nameDescription" >
							<div class="fixedFont">
								<b><a href="../symbols/pv.Panel.html#constructor">pv.Panel</a></b>()
							</div>
							<div class="description">Constructs a new, empty panel with default properties.</div>
						</td>
					</tr>
				</tbody>
			</table>
			

<!-- ============================== properties summary ===================== -->
			
				
				
				<table class="summaryTable" cellspacing="0" summary="A summary of the fields documented in the class pv.Panel.">
					<caption>Field Summary</caption>
					<thead>
						<tr>
							<th scope="col">Field Attributes</th>
							<th scope="col">Field Name and Description</th>
						</tr>
					</thead>
					<tbody>
					
						<tr>
							<td class="attributes">&nbsp;</td>
							<td class="nameDescription">
								<div class="fixedFont">
								<b><a href="../symbols/pv.Panel.html#canvas">canvas</a></b>
								</div>
								<div class="description">The canvas element; either the string ID of the canvas element in the current
document, or a reference to the canvas element itself.</div>
							</td>
						</tr>
					
						<tr>
							<td class="attributes">&nbsp;</td>
							<td class="nameDescription">
								<div class="fixedFont">
								<b><a href="../symbols/pv.Panel.html#children">children</a></b>
								</div>
								<div class="description">The child marks; zero or more <a href="../symbols/pv.Mark.html">pv.Mark</a>s in the order they were
added.</div>
							</td>
						</tr>
					
						<tr>
							<td class="attributes">&nbsp;</td>
							<td class="nameDescription">
								<div class="fixedFont">
								<b><a href="../symbols/pv.Panel.html#defaults">defaults</a></b>
								</div>
								<div class="description">Default properties for panels.</div>
							</td>
						</tr>
					
					</tbody>
				</table>
				
				
				
				<dl class="inheritsList">
				<dt>Fields borrowed from class <a href="../symbols/pv.Bar.html">pv.Bar</a>: </dt><dd><a href="../symbols/pv.Bar.html#fillStyle">fillStyle</a>, <a href="../symbols/pv.Bar.html#height">height</a>, <a href="../symbols/pv.Bar.html#lineWidth">lineWidth</a>, <a href="../symbols/pv.Bar.html#strokeStyle">strokeStyle</a>, <a href="../symbols/pv.Bar.html#width">width</a></dd><dt>Fields borrowed from class <a href="../symbols/pv.Mark.html">pv.Mark</a>: </dt><dd><a href="../symbols/pv.Mark.html#bottom">bottom</a>, <a href="../symbols/pv.Mark.html#childIndex">childIndex</a>, <a href="../symbols/pv.Mark.html#cursor">cursor</a>, <a href="../symbols/pv.Mark.html#data">data</a>, <a href="../symbols/pv.Mark.html#index">index</a>, <a href="../symbols/pv.Mark.html#left">left</a>, <a href="../symbols/pv.Mark.html#parent">parent</a>, <a href="../symbols/pv.Mark.html#proto">proto</a>, <a href="../symbols/pv.Mark.html#reverse">reverse</a>, <a href="../symbols/pv.Mark.html#right">right</a>, <a href="../symbols/pv.Mark.html#root">root</a>, <a href="../symbols/pv.Mark.html#scene">scene</a>, <a href="../symbols/pv.Mark.html#title">title</a>, <a href="../symbols/pv.Mark.html#top">top</a>, <a href="../symbols/pv.Mark.html#type">type</a>, <a href="../symbols/pv.Mark.html#visible">visible</a></dd>
				</dl>
				
			

<!-- ============================== methods summary ======================== -->
			
				
				
				<table class="summaryTable" cellspacing="0" summary="A summary of the methods documented in the class pv.Panel.">
					<caption>Method Summary</caption>
					<thead>
						<tr>
							<th scope="col">Method Attributes</th>
							<th scope="col">Method Name and Description</th>
						</tr>
					</thead>
					<tbody>
					
						<tr>
							<td class="attributes">&nbsp;</td>
							<td class="nameDescription">
								<div class="fixedFont"><b><a href="../symbols/pv.Panel.html#add">add</a></b>(type)
								</div>
								<div class="description">Adds a new mark of the specified type to this panel.</div>
							</td>
						</tr>
					
						<tr>
							<td class="attributes">&nbsp;</td>
							<td class="nameDescription">
								<div class="fixedFont"><b><a href="../symbols/pv.Panel.html#anchor">anchor</a></b>(name)
								</div>
								<div class="description">Returns an anchor with the specified name.</div>
							</td>
						</tr>
					
					</tbody>
				</table>
				
				
				
				<dl class="inheritsList">
				<dt>Methods borrowed from class <a href="../symbols/pv.Mark.html">pv.Mark</a>: </dt><dd><a href="../symbols/pv.Mark.html#anchorTarget">anchorTarget</a>, <a href="../symbols/pv.Mark.html#cousin">cousin</a>, <a href="../symbols/pv.Mark.html#def">def</a>, <a href="../symbols/pv.Mark.html#event">event</a>, <a href="../symbols/pv.Mark.html#extend">extend</a>, <a href="../symbols/pv.Mark.html#first">first</a>, <a href="../symbols/pv.Mark.html#last">last</a>, <a href="../symbols/pv.Mark.html#mouse">mouse</a>, <a href="../symbols/pv.Mark.html#render">render</a>, <a href="../symbols/pv.Mark.html#sibling">sibling</a></dd>
				</dl>
				
			
<!-- ============================== events summary ======================== -->
			

<!-- ============================== constructor details ==================== -->		
			
			<div class="details"><a name="constructor"> </a>
				<div class="sectionTitle">
					Class Detail
				</div>
				
				<div class="fixedFont">
						<b>pv.Panel</b>()
				</div>
				
				<div class="description">
					Constructs a new, empty panel with default properties. Panels, with the
exception of the root panel, are not typically constructed directly; instead,
they are added to an existing panel or mark via <a href="../symbols/pv.Mark.html#add">pv.Mark#add</a>.
					
				</div>
				
				
				
				
					
					
					
					
					
					
					

			</div>
			

<!-- ============================== field details ========================== -->		
			
				<div class="sectionTitle">
					Field Detail
				</div>
				
					<a name="canvas"> </a>
					<div class="fixedFont">
					
					<span class="light">{string}</span>
					<b>canvas</b>
					
					</div>
					<div class="description">
						The canvas element; either the string ID of the canvas element in the current
document, or a reference to the canvas element itself. If null, a canvas
element will be created and inserted into the document at the location of the
script element containing the current Protovis specification. This property
only applies to root panels and is ignored on nested panels.

<p>Note: the "canvas" element here refers to a <tt>div</tt> (or other suitable
HTML container element), <i>not</i> a <tt>canvas</tt> element. The name of
this property is a historical anachronism from the first implementation that
used HTML 5 canvas, rather than SVG.
						
						
					</div>
					
					

						
						
						
						

					<hr />
				
					<a name="children"> </a>
					<div class="fixedFont">
					
					<span class="light">{<a href="../symbols/pv.Mark.html">pv.Mark</a>[]}</span>
					<b>children</b>
					
					</div>
					<div class="description">
						The child marks; zero or more <a href="../symbols/pv.Mark.html">pv.Mark</a>s in the order they were
added.
						
						
					</div>
					
					

						
						
						
							<dl class="detailList">
							<dt class="heading">See:</dt>
							
							<dd><a href="#add">#add</a></dd>
							
							</dl>
						
						

					<hr />
				
					<a name="defaults"> </a>
					<div class="fixedFont">
					
					<span class="light">{<a href="../symbols/pv.Panel.html">pv.Panel</a>}</span>
					<b>defaults</b>
					
					</div>
					<div class="description">
						Default properties for panels. By default, the margins are zero, the fill
style is transparent.
						
						
					</div>
					
					

						
						
						
						

					
				
			

<!-- ============================== method details ========================= -->		
			
				<div class="sectionTitle">
					Method Detail
				</div>
				
					<a name="add"> </a>
					<div class="fixedFont">
					
					<span class="light">{<a href="../symbols/pv.Mark.html">pv.Mark</a>}</span>
					<b>add</b>(type)
					
					</div>
					<div class="description">
						Adds a new mark of the specified type to this panel. Unlike the normal
Mark#add behavior, adding a mark to a panel does not cause the mark
to inherit from the panel. Since the contained marks are offset by the panel
margins already, inheriting properties is generally undesirable; of course,
it is always possible to change this behavior by calling Mark#extend
explicitly.
						
						
					</div>
					
					
					
						
							<dl class="detailList">
							<dt class="heading">Parameters:</dt>
							
								<dt>
									<span class="light fixedFont">{function}</span> <b>type</b>
									
								</dt>
								<dd>the type of the new mark to add.</dd>
							
							</dl>
						
						
						
						
						
							<dl class="detailList">
							<dt class="heading">Returns:</dt>
							
								<dd><span class="light fixedFont">{<a href="../symbols/pv.Mark.html">pv.Mark</a>}</span> the new mark.</dd>
							
							</dl>
						
						
						

					<hr />
				
					<a name="anchor"> </a>
					<div class="fixedFont">
					
					<span class="light">{<a href="../symbols/pv.Anchor.html">pv.Anchor</a>}</span>
					<b>anchor</b>(name)
					
					</div>
					<div class="description">
						Returns an anchor with the specified name. This method is overridden since
the behavior of Panel anchors is slightly different from normal anchors:
adding to an anchor adds to the anchor target's, rather than the anchor
target's parent. To avoid double margins, we override the anchor's proto so
that the margins are zero.
						
						
					</div>
					
					
					
						
							<dl class="detailList">
							<dt class="heading">Parameters:</dt>
							
								<dt>
									<span class="light fixedFont">{string}</span> <b>name</b>
									
								</dt>
								<dd>the anchor name; either a string or a property function.</dd>
							
							</dl>
						
						
						
						
						
							<dl class="detailList">
							<dt class="heading">Returns:</dt>
							
								<dd><span class="light fixedFont">{<a href="../symbols/pv.Anchor.html">pv.Anchor</a>}</span> the new anchor.</dd>
							
							</dl>
						
						
						

					
				
			
			
<!-- ============================== event details ========================= -->		
			
			
			<hr />
		</div>

		
<!-- ============================== footer ================================= -->
		<div class="fineprint" style="clear:both">
			
			Documentation generated by <a href="http://code.google.com/p/jsdoc-toolkit/" target="_blank">JsDoc Toolkit</a> 2.3.0 on Tue Oct 06 2009 09:59:02 GMT-0700 (PDT)
		</div>
	</body>
</html>
